<template>
  <div id="table">
    <el-table :data="tableData.row" border>
      <el-table-column
        v-for="(item, index) in tableData.col"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <!-- 根据业务增添自定义表格 -->
        <template slot-scope="scope">
          <!-- 默认显示数据 -->
          <span v-if="!item.type">{{ scope.row[item.prop] || 'Null' }}</span>
          <!-- 按钮 -->
          <span v-if="item.type === 'Button'">
            <el-button
              v-for="(btn, index) in item.btnList"
              :key="index"
              :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
              :type="btn.type || 'primary'"
              :size="btn.size || 'mini'"
              :icon="btn.icon"
              @click="handleClick(scope.row)"
            >
              {{ btn.label }}
            </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Object,
      default: () => {}
    }
  },

  methods: {
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>
